import React ,{useState,useEffect} from 'react'
import { Button,Input  } from 'antd';
import { useNavigate } from 'react-router-dom';
import { RollbackOutlined, SearchOutlined } from '@ant-design/icons';
import 'dayjs/locale/zh-cn';
import SlideShowProvider from './slideShowProvider';
import DynamicPagination from '../components/pages/DynamicPagination'
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000/';

export default function space() {
  const [slideshowList,setslideshowList]=useState([])
  const [page, setpage] = useState(1);
  const [pageSize, setpagesize] = useState(2);
  const [totalRecords, setTotal] = useState();
  const navigate = useNavigate();
  // 定义一个异步函数，用于获取轮播图列表
  const getslideshowList = async()=>{
    // 使用axios发送get请求，获取轮播图列表数据
    const {data:{list,total}} = await axios.get('/kai/getslide',{params:{page:page,pagesize:pageSize}})
    // 将获取到的轮播图列表数据保存到state中
    setslideshowList(list)
    // 将获取到的总条数保存到state中
    setTotal(total)
  }
   // 处理页面变化
   // 处理页码变化
   // 处理页码变化
   const handlePageChange = (page, pageSize) => {
      // 设置当前页码
      setpage(page)
      // 设置每页显示的条数
      setpagesize(pageSize)
    };
    const xin=()=>{
      navigate('/zhu/navpage/AddslideShow')
    }
    // 处理显示大小变化
    const handleShowSizeChange = (current, size) => {
      // 设置当前页码
      setpage(current)
      // 设置每页显示数量
      setpagesize(size)
};
  

  useEffect(()=>{
    getslideshowList()
  },[page,pageSize])
  return (
    <div style={{
            scrollbarWidth:'none',
      overflowY:'auto',
      margin:'auto',
      width: '70%',
      height: '100%',
    //   backgroundColor: 'white'
    }
    }>
      <div style={{marginTop: '0.6rem',overflow:'hidden',backgroundColor: 'white',width:'100%',height:'24%',borderRadius:'20px'}}>
        <div style={{display:'flex',margin:'0.6rem'}}>
            <div style={{width:'0.16rem', marginTop: '0.1rem',borderRadius:'0.1rem',height:'0.6rem',backgroundColor:'#3dd4a7'}}></div>
            <div style={{fontSize:'0.5rem',marginLeft:'0.2rem'}}>轮播图管理</div>
        </div>
        <div style={{width:'100%',display:'flex',fontSize:'0.4rem',color:'#999',margin:'1rem 0.6rem'}}>
            <div style={{margin:'-0.2rem 0.1rem'}}>
                <Input style={{height:'1rem',width:'10rem'}} placeholder="请输入关键字" />
            </div>
            <Button style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',background:'#5adbb5',color:'white',borderRadius:'0.1rem'}} type="primary"  icon={<SearchOutlined />} />
            <Button style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',color:'black'}} type="primary" color='default' variant="outlined" icon={<RollbackOutlined />} />
           
        </div>
      </div>
      <div style={{marginTop: '0.6rem',overflow:'hidden',marginBottom:'1.25rem',backgroundColor: 'white',width:'100%',borderRadius:'20px'}}>
             <div style={{margin:'0.5rem 25rem',display:'flex'}} >
                 <Button onClick={xin} style={{background:'#5adbb5',color:'white',width:'1.8rem',height:'1rem'}} variant="solid">
                新增
                </Button>
                <Button style={{marginLeft:'0.5rem',width:'2.4rem',height:'1rem'}} color="default" variant="outlined" >
                批量操作
                </Button>
             </div>
              <div style={{width:'92%',margin:'0 auto',position:'relative'}}>
              <SlideShowProvider onReload={getslideshowList} slideshowList={slideshowList}></SlideShowProvider>
           <div style={{width:'50%',margin:'0.5rem 16.5rem'}}>
            <DynamicPagination
                style={{position:'absolute',right:'1rem'}}
                pageSize={pageSize}
                total={totalRecords}
                currentPage={page}
                defaultCurrent={page}
                defaultPageSize={pageSize}
                showQuickJumper
                onPageChange={handlePageChange}
                onShowSizeChange={handleShowSizeChange}
            />
        </div>
        </div>
            
      </div>
    </div>
  )
}

